<template>
  <div class="app-container oneSearchNoFooter">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <el-input
            v-model="formInline.card_no"
            placeholder="请输入卡号"
            @keyup.enter.native="searchClick"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="formInline.mobile"
            placeholder="请输入手机号"
            @keyup.enter.native="searchClick"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <dj-button size="small" @search="searchClick">
            <template #default>搜索</template>
          </dj-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small">
        <el-table-column align="center" label="卡号" prop="card_no"></el-table-column>
        <el-table-column align="center" label="姓名" prop="user_name"></el-table-column>
        <el-table-column align="center" label="性别" prop="sex"></el-table-column>
        <el-table-column align="center" label="手机号" prop="mobile"></el-table-column>
        <el-table-column align="center" label="卡类型" prop="type_id"></el-table-column>
        <el-table-column align="center" label="所属门店" prop="store_name"></el-table-column>
        <el-table-column align="center" label="注册时间" prop="date_create"></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button @click="editClick(scope.row,scope.$index)" type="primary" size="mini">修改手机号</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 弹框 -->
      <el-dialog
        :close-on-click-modal="false"
        width="440px"
        title="修改手机号"
        :visible.sync="addhouseDialog"
        @close="callOf('saveForm')"
      >
        <el-form :inline="true" :model="saveForm" ref="saveForm" :rules="rules">
          <el-form-item label="新手机号" prop="mobile">
            <el-input style="width:300px" size="small" v-model="saveForm.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span class="indexColor">
          <span class="danger el-icon-warning"></span> 修改后原手机号绑定信息立即失效
        </span>
        <div slot="footer" class="dialog-footer">
          <el-button size="small" type="primary" @click="saveClick('saveForm')">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getList, save } from "@/api/member/edit_phone";
import { mobile } from "@/utils/validate";
export default {
  data() {
    const validateMobile = (rule, value, callback) => {
      if (!mobile(value)) {
        callback(new Error("请输入正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      list: null,
      listLoading: false,
      editIndex: "",
      formInline: {
        mobile: "",
        card_no: "",
      },
      addhouseDialog: false,
      saveForm: {
        mobile: "",
        id: "",
      },
      rules: {
        mobile: [
          { required: true, trigger: "blur", validator: validateMobile },
        ],
      },
    };
  },
  methods: {
    saveClick(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          save(this.saveForm).then((response) => {
            this.$message({ type: "success", message: response.message });
            this.list[this.editIndex].mobile = this.saveForm.mobile;
            this.addhouseDialog = false;
          });
        }
      });
    },
    editClick(row, index) {
      this.editIndex = index;
      this.saveForm.id = row.id;
      this.saveForm.mobile = row.mobile;
      this.addhouseDialog = true;
    },
    // 搜索
    searchClick() {
      if (!this.formInline.card_no && !this.formInline.mobile) {
        this.$message({ type: "error", message: "请输入查询条件哦" });
        return;
      }
      this.fetchData();
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      getList(this.formInline)
        .then((response) => {
          this.list = response;
          this.listLoading = false;
        })
        .catch((res) => {
          this.listLoading = false;
        });
    },
    //关闭弹框重置
    callOf(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>